<template>
    <div style="wdith:100%;height:100%;position:relative;">
<!--        <div class="danmu ziti-miaobian" style="color:pink" v-bind:class="{'danmu-stop':isDanmuStop}">日本唱歌的女孩子都挺厉害的，词曲包办，又能玩乐器</div>-->
<!--        <div class="danmu1 ziti-miaobian" style="color:red;" v-bind:class="{'danmu-stop':isDanmuStop}">miwa的这个视频是真TMD好看</div>-->
<!--        <div class="danmu2 ziti-miaobian" style="color:yellow" v-bind:class="{'danmu-stop':isDanmuStop}">好评!UP主NB,点赞三连了。</div>-->
<!--        <div class="danmu3 ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">应该有点紧张，声音有点挤</div>-->
<!--        <div class="danmu4 ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">miwa真的好厉害，一把吉他写那么多歌都好听</div>-->
        <template v-for="item in res0" >
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,left:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>

        <template v-for="item in res1" >
            <!--            123{{item.danmuContent}}-->
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,animationDelay:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>

        <template v-for="item in res2" >
            <!--            123{{item.danmuContent}}-->
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,animationDelay:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>

        <template v-for="item in res3" >
            <!--            123{{item.danmuContent}}-->
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,animationDelay:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>

        <template v-for="item in res4" >
            <!--            123{{item.danmuContent}}-->
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,animationDelay:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>

        <template v-for="item in res5" >
            <!--            123{{item.danmuContent}}-->
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,animationDelay:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>

        <template v-for="item in res6" >
            <!--            123{{item.danmuContent}}-->
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,animationDelay:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>

        <template v-for="item in res7" >
            <!--            123{{item.danmuContent}}-->
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,animationDelay:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>
        <template v-for="item in res8" >
            <!--            123{{item.danmuContent}}-->
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,animationDelay:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>

        <template v-for="item in res9" >
            <!--            123{{item.danmuContent}}-->
            <div :key="item.id" v-bind:style="{top:item.top+'%',color:item.danmuColor,animationDelay:item.danmuDelay+'ms'}" class="danmu ziti-miaobian" v-bind:class="{'danmu-stop':isDanmuStop}">{{item.danmuContent}}</div>
        </template>
    </div>
</template>

<script>
    export default {
        name: "danmu",
        data(){
            return{
                isDanmuStop:true,
                res0:[],
                res1:[],
                res2:[],
                res3:[],
                res4:[],
                res5:[],
                res6:[],
                res7:[],
                res8:[],
                res9:[],
            }
        },
        methods:{
            sliderValueChange(newValue){
                var self = this;
                //根据sliderValue和videoId加载弹幕集合
                var sliderValue = newValue;
                // var videoId = window.localStorage.getItem("videoId");

                var videoInfo =  JSON.parse(localStorage.getItem("videoInfo"));
                var videoId = videoInfo.videoId;

                var danmuCangku = Math.floor(parseInt(newValue)%10);

                var danmuCollectDTO = new Object();
                danmuCollectDTO.videoId = videoId;
                danmuCollectDTO.sliderValue = sliderValue;

                self.$api.post('danmu-service/danmuController/danmuCollect',danmuCollectDTO, result => {
                    if(danmuCangku===0){
                        self.res0 = result;
                    }

                    if(danmuCangku===1){
                        self.res1 = result;
                    }

                    if(danmuCangku===2){
                        self.res2 = result;
                    }

                    if(danmuCangku===3){
                        self.res3 = result;
                    }

                    if(danmuCangku===4){
                        self.res4 = result;
                    }

                    if(danmuCangku===5){
                        self.res5 = result;
                    }

                    if(danmuCangku===6){
                        self.res6 = result;
                    }

                    if(danmuCangku===7){
                        self.res7 = result;
                    }

                    if(danmuCangku===8){
                        self.res8 = result;
                    }

                    if(danmuCangku===9){
                        self.res9 = result;
                    }
                });

            },
            doDanmuStop(danmuStop){
                this.isDanmuStop = danmuStop;
            },
            doCleanDanmu(){
                this.res0 = [];
                this.res1 = [];
                this.res2 = [];
                this.res3 = [];
                this.res4 = [];
                this.res5 = [];
                this.res6 = [];
                this.res7 = [];
                this.res8 = [];
                this.res9 = [];
            }
        }
    }
</script>

<style scoped>
    .danmu {
        position: absolute;
        left: 100%;
        width:100%;
        height:30px;
        line-height:30px;
        font-size:24px;
        /*top:100px;*/
        z-index:17;
        /*animation: danmuScroll 5s linear 3ms 1;*/
        animation-name:danmuScroll;
        animation-duration:10s;
        animation-timing-function:linear;
        /*animation-delay:100ms;*/
        animation-iteration-count:1;
    }

    @keyframes danmuScroll {
        from {
            /*left: 100%;*/
            transform: translateX(0);
        }
        to {
            /*left: 0;*/
            transform: translateX(-180%);
        }
    }

    .ziti-miaobian{
        text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
        -webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
        -moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
    }

    .danmu-stop{
        animation-play-state: paused;
    }
</style>
